<%@page contentType="text/html" pageEncoding="UTF-8"%>
<script type="text/javascript" src="${ pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" language="javascript">
//看不清,换一个
function reloadCode(){
	 $("#CreateCheckCode").attr("src","${pageContext.request.contextPath}/user?method=PictureCheckCode&"+Math.random()); 
}
//校验用户名
function checkUsename() {
	//通过id为username的对象得到用户名
	var username = $("#username").val();
	//如果用户名存在并且不为空就返回真
	if(username && username != '') {
		return true;
	} else {
		//否则在id为usernameMsg的表单里写入提示
		$("#usernameMsg font").html("用户名不能为空！");
		return false;//不提交
	}
}
//校验邮箱
function checkEmail() {
	var  filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
	//通过id为email的对象中得到email
 	var email = $('#email').val();
	//如果email存在并且不为空
 	if(email && email != '') {
 		//如果email符合邮箱的格式，id为emailMsg的表单就不输出内容
 		if (filter.test(email)) {
 			$("#emailMsg font").html("");
 			return true;
 		} else {
 			//如果不符合格式就是提示
 			$("#emailMsg font").html("您的电子邮件格式不正确！");
 			return false;
 		}
 	} else {
 		//如果不存在就输出提示
 		$("#emailMsg font").html("邮箱不能为空！");
 		return false;
 	}
	
}
//校验密码
function checkPassword() {
	//通过id为password1的对象得到password1
	var password1 = $("#password1").val();
	//通过id为password2的对象得到password2
	var password2 = $("#password2").val();
	//如果//password1存在并且不为空
	if(password1 && password1 != '') {
		//不输出内容
		$("#password1Msg font").html("");
	} else {
		//否则提示
		$("#password1Msg font").html("密码不能为空！");
		return false;
	}
	//如果//password2存在并且不为空
	if(password2 && password2 != '') {
		//不输出内容
		$("#password2Msg font").html("");
	} else {
		//否则提示
		$("#password2Msg font").html("密码不能为空！");
		return false;
	}
	//如果password1与password2不一致 就提示
	if(password1 != password2) {
		$("#password2Msg font").html("密码不一致！");
		return false;
	} else {
		//一致就不输出内容
		$("#password2Msg font").html("");
		return true;
	}
}
//注册提交校验
function check() {
	//email的校验方法
	var eFlag = checkEmail();
	//Password的校验方法
	var pFlag = checkPassword();
	//用户名的校验方法
	var uFlag = checkUsename();
	//4种校验同时通过 为真
	var mFlag = checkMyReload();
	if(eFlag && pFlag && uFlag && mFlag) {
		return true;
	} else {
		return false;
	}
}
 	//校验用户名是否存在
$(document).ready(function(){
	//#username 移出光标事件
	$("#username").blur(function(){
		//通过id为username的对象获取用户名
		var userName= $("#username").val();
		//向servlet里提交方法为checkUserName的方法 接收返回的data值
// 		 $.post("${pageContext.request.contextPath}/user?method=checkUserName&userName=" + userName,function(data){
//    		  if(data == 1){
//    			  $("#usernameMsg font").html("该用户名 " + userName + " 已存在");
//    		  } else {
//    			$("#usernameMsg font").html("");
//    		  }
//    	  });
		$.ajax({
			type:"POST",
			url:"${pageContext.request.contextPath}/user",
			data: {method:"checkUserName",userName: userName},
			success: function(data) {
				  if(data == 1){
	    			  $("#usernameMsg font").html("该用户名 " + userName + " 已存在");
	    		  } else {
	    			$("#usernameMsg font").html("");
	    		  }
			}
		});
	});
	//验证码光标移出事件
	$("#checkCode").blur(function(){
		var checkCode= $("#checkCode").val();
		/*  $.post("${pageContext.request.contextPath}/user?method=checkMyReload&checkCode=" + checkCode,function(data){
	   		  if(data == 1){
	   			  $("#checkCodeMsg font").html("验证码不正确");
	   		  } else {
	   			$("#checkCodeMsg font").html("");
	   		  }
		 }); */
		 $.ajax({
			 type:"POST",
			 url:"${pageContext.request.contextPath}/user",
			 data:{method:"checkMyReload",checkCode:checkCode},
			 success:function(data){
				 if(data == 1){
		   			  $("#checkCodeMsg font").html("验证码不正确");
		   		  } else if(data==3){
		   			$("#checkCodeMsg font").html("qinagshuruyanzhengma ");
		   		  }
				 else{
					 $("#checkCodeMsg font").html("");
				 }
			 }
		 })
	});
});
</script>
<form id="" name="" method="post" action="${pageContext.request.contextPath}/user" onSubmit="return check()">
<input type="hidden" name="method" value="register">
<span style="white-space:pre"></span>
<table>
	<tr>
		<td>邮箱</td>
		<td><input id="email" type="text" name="email" onblur="checkEmail()" /></td>
		<td>  
             <span id="emailMsg"><font color="red"></font>  
             </span>  
         </td> 
	</tr>
	<tr>
		<td>用户名</td>
		<td><input id="username" type="text" name="username" /></td>
		<td>  
             <span id="usernameMsg"><font color="red"></font>  
             </span>  
         </td> 
	</tr>
	<tr>
		<td>密码</td>
		<td><input id="password1" type="password" name="password1" /></td>
		<td>  
             <span id="password1Msg"><font color="red"></font>  
             </span>  
         </td>  
	</tr>
	<tr>
		<td>确认密码</td>
		<td><input id="password2" type="password" name="password2" onblur="checkPassword()"/></td>
		<td>  
                <span id="password2Msg"><font color="red"></font>  
                </span>  
            </td> 
	</tr>
	<tr>
		<td>验证码</td>
		<td><input name="checkCode" type="text" id="checkCode" title="验证码区分大小写"  size="8" ,maxlength="4" /></td>
		<td>  
                <span id="checkCodeMsg"><font color="red"></font>  
                </span>  
            </td> 
            <img src="${pageContext.request.contextPath}/user?method=PictureCheckCode" id="CreateCheckCode" align="middle">  
            <a href="javascript:void();" onclick="reloadCode()"> 看不清,换一个</a>  
	</tr>
	<tr>
		<td><input id="submit" type="submit" name="submit" value="注册" /></td>
	</tr>
</table>
</form>
